// 导入less文件，可以把一个样式文件导入另个文件中
@import "common";
body{
    min-width: 320px;
    margin: 0 auto;
    width: 15rem;
    line-height: 1.5;
    font-family: Arial, Helvetica, sans-serif;
    background-color: #f2f2f2;
    // height: 3900rem / @baseFont;
}
a{
    text-decoration: none;
}
ul li{
    list-style: none;
}
p,h1,span{
    margin: 0;
}
@baseFont:50;
// 顶部搜索
.search-concent{
    // position: fixed;
    // // top: 0;
    // // left: 50%;
    display: block;
    background-color: #ff5558;
    // width: 750rem / @baseFont;
    height: 180rem / @baseFont;
    // 搜索第一模块
    .search-concent-one{
        display: flex;
        width: 682rem / @baseFont;
        height: 88rem / @baseFont;
        margin: 0 34rem / @baseFont;
    .classic,.login{
        width: 36rem / @baseFont;
        height: 60rem / @baseFont;
        margin: 11rem / @baseFont 25rem / @baseFont 7rem / @baseFont 0;
        img{
            width: 36rem / @baseFont;
            height: 60rem / @baseFont;
        }
    }
    .login{
        margin-right: 0;
    }
    .search-top{
        flex: 1;
        height: 88rem / @baseFont;
        img{
            margin-top: 18rem / @baseFont;
            width: 450rem / @baseFont;
            height: 55rem / @baseFont;
        }
    }
}
// 搜索第二模块
.search-concent-two{
    // width: 750rem / @baseFont;
    height: 92rem / @baseFont;
    .search{
        display: block;
        position: relative;
        width: 636rem / @baseFont;
        height: 88rem / @baseFont;
        background-color: #ffffff;
        height: 66rem / @baseFont;
        border-radius: 33rem / @baseFont;
        margin: 0 24rem / @baseFont;
        margin-top: 10rem / @baseFont;
        color: #757575;
        font-size: 25rem / @baseFont;
        line-height: 66rem / @baseFont;
        padding-left: 66rem / @baseFont;
        .search-ico{
            position: absolute;
            top: 15rem / @baseFont;
            left: 18rem / @baseFont;
            width: 36rem / @baseFont;
            height: 36rem / @baseFont;
            background:url(../images/search.png) no-repeat;
            background-size: 36rem / @baseFont 36rem / @baseFont; 
        }
    }
}
}
// banner
.banner{
    // width: 750rem / @baseFont;
    height: 260rem / @baseFont;
    background-color: #ff5558;
    .banner-img{
        overflow: hidden;
        width: 702rem / @baseFont;
        height: 260rem / @baseFont;
        margin: 0 24rem / @baseFont;
        background-color: #fff;
        border-radius: 15rem / @baseFont;
        img{
            width: 100%;
            height: 100%;
        }
    }
}
// opa
.opa1,.opa2{
    display: block;
    height: 171rem / @baseFont;
    img{
        width: 100%;
        height: 100%;
    }
}
.opa2{
    display: flex;
    a{
        flex: 1;
    }
}
// nav
nav{
    height: 308rem / @baseFont;
    a{
        float: left;
        width: 150rem / @baseFont;
        height: 142rem / @baseFont;
        text-align: center;
        img{
            display: block;
            width: 84rem / @baseFont;
            height: 84rem / @baseFont;
            margin: 10rem / @baseFont auto 0;
        }
        span{
            display: block;
            margin-top: 5rem / @baseFont;
            font-size: 22rem / @baseFont;
            color: #666666;
        }
    }

}
// 广告
.floor{
    display: flex;
    height: 234rem / @baseFont;
    margin-bottom:  24rem / @baseFont;
    a{
        img{
            width: 100%;
            height: 100%;
        }
    }
    a:nth-child(1){
        flex:2;
        // img{
        //     width: 100%;
        //     height: 100%;
        // }
    }
    a:nth-child(2),a:nth-child(3){
        flex:1;
        margin-left: 1rem / @baseFont;
        // img{
        //     width: 100%;
        //     height: 100%;
        // }
    }
}
//折扣区
.zhekou{
    overflow: hidden;
    display: flex;
    position: relative;
    height: 258rem / @baseFont;
    background-color: #fff;
    margin: 0 24rem / @baseFont 2rem / @baseFont ;
    &::after{
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        content: '';
        height: 100%;
        width: 2rem / @baseFont;
        background-color: #f2f2f2;
    }
    div{
        flex: 1;
        h1{
            font-size: 28rem / @baseFont;
            margin: 18rem / @baseFont 8rem / @baseFont 0 24rem / @baseFont; 
        }
        p{
            font-size: 24rem / @baseFont;
            color: #999999;
            margin: 4rem / @baseFont 0 0 24rem / @baseFont;
        }
        ul{
            display: flex;
            margin-top: 5rem / @baseFont;
            padding-left: 28rem / @baseFont;
            li{
                flex: 1;
                img{
                    display: block;
                    margin: 0 auto;
                    width: 120rem / @baseFont;
                    height: 120rem / @baseFont;
                }
                p{
                    text-align: center;
                    margin: -3rem / @baseFont 0 0 0;
                    color: #ff5500;
                    font-size: 22rem / @baseFont;
                    span{
                        font-size: 26rem / @baseFont;
                    }
                }
            }
        }
    }

}
.tuijian{
    display: flex;
    height: 172rem / @baseFont;
    background-color: #fff;
    margin: 0 24rem / @baseFont;
    padding-right: 20rem / @baseFont;
    div{
        width: 173rem / @baseFont;
        height: 100%;
        padding: 47rem / @baseFont 18rem / @baseFont 0;
        h1{
            font-size: 32rem / @baseFont;
            color: #444444;
        }
        p{
            font-size: 24rem / @baseFont;
            color: #999999;

        }
    }
    a{
        display: flex;
        flex: 1;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        img{
            display: block;
            width: 100rem / @baseFont;
            height: 100rem / @baseFont;
        }
        p{
            font-size: 22rem / @baseFont;
            color: #333333;
            margin-top: 5rem / @baseFont;
        }
    }
}
.top-radiu{
    border-radius: 15rem / @baseFont 15rem / @baseFont 0 0;
}
.bottom-radiu{
    border-radius: 0 0 15rem / @baseFont 15rem / @baseFont ;
}
// 推荐榜单
.new-bd{
    height: 900rem / @baseFont;
    img{
        width: 100%;
        height: 60rem / @baseFont;
    }
    .bd-one{
        display: flex;
        height: 266rem / @baseFont;
        margin: -20rem / @baseFont 24rem / @baseFont 10rem / @baseFont; 
        div:nth-child(2){
            margin: 0 12rem / @baseFont;
        }
        div{
            position: relative;
            background-color: #fff;
            height: 266rem / @baseFont;
            flex: 1;
            border-radius: 15rem / @baseFont;
            img{
                display: block;
                margin: 15rem / @baseFont auto 0;
                width: 150rem / @baseFont;
                height: 150rem / @baseFont;
            }
            .bg{
                position: absolute;
                bottom: 0;
                left: 0;
                width: 226rem / @baseFont;
                height: 93rem / @baseFont;
            }           
            p{
                position: relative;
                z-index: 1;
                font-size: 26rem / @baseFont;
                color: #ffffff;
                text-align: center;
                margin-top: 31rem / @baseFont;
                line-height: 1.2;
            }
            .bd-font-two{
                color:#f9eee4;
                font-size: 22rem / @baseFont;
                margin: 0;
            }
            span{
                box-sizing: border-box;
                position: absolute;
                z-index: 2;
                bottom: 73rem / @baseFont;;
                left: 50%;
                line-height: 30rem / @baseFont;;
                transform: translateX(-50%);
                width: 100rem / @baseFont;
                height: 34rem / @baseFont;
                border: 2rem / @baseFont solid #d9a87a;
                background-color: #fff;
                border-radius: 20rem / @baseFont;
                font-size: 22rem / @baseFont;
                color: #d9a87a;
                text-align: center;
            }
        }
        
    }
}
// 底部nav
.nav-bottom{
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    width: 15rem;
    height: 100rem / @baseFont;
    background-color: #fff;
    a{
        float: left;
        width: 150rem / @baseFont;
        height: 100rem / @baseFont;
        img{
            display: block;
            width: 48rem / @baseFont;
            height: 48rem / @baseFont;
            margin: 12rem / @baseFont auto 0;
        }
    }

    
}
// 右侧定位app
.app{
    position: fixed;
    top: 50%;
    right: 10rem / @baseFont;
    width: 100rem / @baseFont;
    height: 145rem / @baseFont;
    img{
        width: 100%;
        height: 100%;
    }
}